<template>
  <el-card class="project-number" :style="{ backgroundColor: cardColor }">
    <template #header>
      <div>
        <el-image class="card-image" :src="imgUrl" />
      </div>
    </template>
    <el-row>
      <el-col :span="24"
        ><span class="card-title">{{ title }}</span></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="24"
        ><span class="card-content">{{ number }}</span></el-col
      >
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  imgUrl: {
    type: String,
    required: true,
  },
  number: {
    type: Number,
    required: true,
  },
  cardColor: {
    type: String,
  },
});
</script>

<style scoped lang="scss">
.project-number {
  width: 90%;
  height: auto;
  text-align: center;
}
.card-title {
  font-weight: bold;
  color: grey;
}
.card-content {
  font-weight: bold;
}
.card-image {
  width: 100px;
  height: 100px;
}
</style>
